<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msapplication-window"
	content="width=device-width;height=device-height">
<title>秒杀</title>
<link rel="stylesheet" href="../css/common/jquery.mobile-1.4.5.min.css">


<!-- CSS and other pretties -->
<!-- <link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/site.css">
<link rel="stylesheet" href="../css/mobile.css"> -->

<link rel="stylesheet" href="../css/common/unslider.css">

<script src="../js/common/jquery-2.0.0.js"></script>
<script src="../js/common/jquery.mobile-1.4.5.js"></script>
<script src="../js/common/velocity.min.js"></script>
<script src="../js/common/jquery.event.move.js"></script>
<script src="../js/common/jquery.event.swipe.js"></script>
<script src="../js/common/unslider-min.js"></script>
</head>

<style>
	* {
		margin: 0;
		padding: 0;
	
		-webkit-font-smoothing: antialiased;
	
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.banner { position: relative;height: 10em;}
    .banner li { list-style: none;
    		position: absolute;
			height: 10em;
			width: 100%;
     }
   	.banner ul li { float: left; }
        
     #sds {
			/* display: block;
			float: left;
			width: 100%;
			position: relative;
			border-radius: 0.4rem;
			box-shadow: inset 0 0.3rem 0.2rem rgba(255,255,255,.02), inset 0 0 0 0.1rem rgba(255,255,255,.08); 
			color: #fff;*/
	}
		
	#sds > div {
		position: relative;
		background: #fff;
		color: #666;
		text-align: center;
		text-shadow: none;
		/*  border-radius: 0.5rem;
		box-shadow: 0 0.4rem 0.5rem rgba(0,0,0,.1);  */
	}
	
	#sds img {
		-webkit-user-drag: none;
		top: 50%;
		transform: translateY(-50%) translateX(-50%);
		height: auto;
		position: absolute;
		width: 100%;
	}
		
	#sds .unslider-nav {
		position: absolute;
		bottom: -0.1rem;
		left: 0;
		right: 0;
		top: auto;
		z-index:10;
		margin: 0;
	}
	#sds .unslider-nav ol {
		list-style: none;
		text-align: center;
	}
	
	#sds .unslider-nav ol li {
		display: inline-block;
		float: none;
		width: 0.4rem;
		height: 0.4rem;
		margin: 0 0.4rem;
		padding: 0.2rem;

		background: transparent;
		border-radius: 0.5rem;
		overflow: hidden;
		text-indent: -99.9em;
		border: 0.1rem solid #fff;
		cursor: pointer;
		opacity: .4;
	}
		#sds .unslider-nav ol li.unslider-active {
			background: #fff;
			cursor: default;
			opacity: 1;
		}
		
		.unslider .unslider-nav li {
			display: inline-block;
			float: left;
			margin: -0.2rem 0 0 3.2rem;
			padding: 0.2rem 1.8rem;
			border-radius: 0.3rem;
			
			color: #fff;
			color: rgba(255,255,255,.7);
			font-size: 1.3rem;
			font-weight: 500;
			cursor: pointer;
			list-style: none;
			transition: color .2s, background .2s;
		}
		.maio_sha_title{
			margin:1rem 0 0 0 ;
		}
		.maio_sha_text{
			background-color: red;
			color:white;
			margin-left:0.5rem;
			padding:0.3rem;
			border-radius:0.2rem;
			font-size:0.8rem;
		}
		
		.goods_title {
			font-weight:bold;
			font-size:12pt;
		}
		
		.goods_description {
			color:gray;
			margin:0.5em 0 0 0.5em;
			font-size:0.8rem;
		}
		
		.price_div{
			margin-top:1.5em
		}
		
		.price{
			color:red;
			font-size:14pt;
			margin:1.5em 0 0 0.5em;
		}
		.price_free{
			color:gray;
			margin:1.5rem 0 0 0.5rem;
			text-decoration:line-through;
		}
		
		.ju_li_end{
			color:red;
			margin:1rem 0 0 4rem;
		}
		
		.ju_li_end_time{
			color:white;
			margin:1em 0 0 0;
			padding:0.3em;
			border-radius:0.2em;
			font-size:13pt;
			background: -moz-linear-gradient(left top, red, orange);
			background: -webkit-linear-gradient(left top, red, orange);
			background: -o-linear-gradient(left top, red, orange);
		}
		
		.can_shu > ul > li > a{
			font-weight:normal;
		}
		.ju_li_end_split{
			color:red;
		}
		
		.shou_cang{
			margin:1em 0 0 0.5em;
			font-size:0.8rem;
		}
		
		.shou_cang span{
			color:gray;
		}
		
		.shou_cang .browser, .shou_cang .xiao_liang{
			margin-left:0.5em;
			font-size:0.8rem;
		}
		
		.mint-navbar .mint-tab-item.is-selected .mint-tab-item-label{
			color:orange;
			border-bottom:.3rem solid red;
		}
		
	
		
		.mint-button--small{
			display: inline-block;
		    padding: 0 0.5em;
		    height: 2em;
		}
		
		.evaluate{
			margin:1em 0 0 1em;
		}
		.evaluate > div{
			margin:0.5em 0 0 0;
		}
		.evaluate_date{
			float:right;
			margin:0 1em 0 0;
			color:gray;
		}
		
		.goods_type{
			font-size:8pt;
			color:gray;
		}
		
		.ordering{
			background-color:rgba(255 85 67 1) ;
			color:white;
		}
		.mint-tab-container-item{
			 padding-bottom: 7.2em;
		}
		.goods_detail_body{
			overflow: auto;
		    height: 100%;
		   
		}
		
		#tabs .ui-btn.ui-btn-active{
			background-color:none;
			border-color:none;
		}
		#tabs .ui-btn{
			border:none;
		}
		
		#goods_evaluate_id .button_select{
			margin:1em 0 0 0.5em;
			background-color:#ff5543 ;
			color:white;
			text-shadow:none;
			border-radius:0.3rem;
			padding:0.4rem 0.8rem;
		}
		
		#goods_evaluate_id .button_unselect{
			margin:1em 0 0 0.5em;
			border:0.1rem solid #ff5543 ;
			background-color: white;
			color:#ff5543;
			text-shadow:none;
			border-radius:0.3rem;
			padding:0.4rem 0.8rem;
		}
		.splitLine{
			height:0.2rem;
			color:gray;
			border-top:0.1rem;
		}
		.box{
			position:fixed;
			bottom:-100%;
			left:0%;
			height:20rem; 
			background-color: #fff;
			width: 100%;
			display: block;
			z-index:1050;
		}
		.box-inner {
		    position: absolute;
		    width:100%;
		    padding: 0.5rem 0 0 0 ;
		    top: 0px;
		    bottom: 0px;
		    overflow: scroll;
		    -webkit-overflow-scrolling: touch;
		}
		.buttonredius{
			margin-right:-0.5rem;
			border-radius:0.4rem;
			box-shadow:none;
			font-size:1.8rem;
			padding:0.1rem 0.5rem;
		}
		.buttonplus{
			margin-left:-0.5rem;
			border-radius:0.4rem;
			box-shadow:none;
			font-size:1.8rem;
			padding:0.1rem 0.5rem;
		}
		.buttoncount{
			box-shadow:none;
			padding:0.1rem 0.5rem;
			margin:0 ;
		}
		
		ul,
            li {
                list-style: none;
            }
            
            a {
                text-decoration: none;
            }
            
            a:hover {
                cursor: pointer;
                text-decoration: none;
            }
            
            a:link {
                text-decoration: none;
            }
            
            img {
                vertical-align: middle;
            }
            
            .btn-numbox {
                overflow: hidden;
                margin: 2rem 0 0 1rem;
            }
            
            .btn-numbox li {
                float: right;
            }
            
            .btn-numbox li .number,
            .kucun {
                display: inline-block;
                font-size: 0.8rem;
                color: #808080;
                vertical-align: sub;
            }
            
            .btn-numbox .count {
                overflow: hidden;
                margin: 0 1.6rem 0 3rem;
                float:right;
            }
            
            .btn-numbox .count .num-jian,
            .input-num,
            .num-jia {
                display: inline-block;
                width: 28px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                font-size: 18px;
                color: #999;
                cursor: pointer;
                border: 1px solid #e6e6e6;
            }
            
            #box .input-num{
             	text-align: center;
            }
            
            .btn-numbox .count .num-jia {
                margin-left: 1px;
            }
            
            .btn-numbox .count .input-num {
                width: 58px;
                height: 26px;
                color: #333;
                border-left: 0;
                border-right: 0;
                min-height:1rem;
                border-radius:0 ;
                box-shadow:none;
            }
            .count li div{
            	margin:0 ;
            	border-radius:0 ;
            	  border-left: 0;
            	  box-shadow:none;
                border-right: 0;
            }
            
            #confrim_button{
            	background-color:#ff5543 ;
            	color:white;
            	text-align:center;
            	padding:0.5rem;
            	margin-top:1rem;
            }
            
            .blur {
				-webkit-filter: blur(0.1rem); /* Chrome, Opera */
			   	-moz-filter: blur(0.1rem);
			    -ms-filter: blur(0.1rem);    
		        filter: blur(0.1rem);
				filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
			}
			
			.modal-backdrop {
			    background-color: #000;
			    bottom: 0;
			    left: 0;
			    position: fixed;
			    right: 0;
			    top: 0;
			    z-index: 1040;
			    opacity:0.5;
			    transition: opacity 0.15s linear 0s;
			}
			
			#box button.guige_select{
				background-color:#ff5543;
				color:white;
				font-size:0.8rem;
				padding:0.3rem;
				border-radius:0.3rem;
				text-shadow:none;
			}
			#box button.guige_unselect{
				/* color:#ff5543; */
				font-size:0.8rem;
				padding:0.3rem;
				border-radius:0.3rem;
			}
</style>
<body>
	<div data-role="page">
	
	<div id="sds">
		<div class="banner">
		    <ul>
		       <li><img src="../image/cat1.jpg" alt="Cats!"></li>
				<li><img src="../image/cat2.jpg" alt="Cats!"></li>
				<li><img src="../image/cat3.jpg" alt="Cats!"></li>
				<li><img src="../image/cat4.jpg" alt="Cats!"></li>
				<li><img src="../image/cat5.jpg" alt=">:)"></li>
				<li><img src="../image/cat6.jpg" alt="Cats!"></li>
		    </ul>
		</div>
	</div>
	<div class="maio_sha_title">
    	<span class="maio_sha_text">秒杀</span>
    	<span class="goods_title">[非凡渔具]日本Megabass水滴轮FX68左手</span>
    </div>
    <div class="goods_description">
    	根据GB/T 6964-2010规定,采用扁平楔形网内径测量仪进行测量.网目长度测量时,网目应沿有结网
    </div>
    <div class="price_div">
    	<span class="price">¥249</span>
    	<span class="price_free">¥499</span>
    	<span class="ju_li_end">距离结束</span>
    	<span class="ju_li_end_time">00</span>
    	<span class="ju_li_end_split">:</span>
    	<span class="ju_li_end_time">13</span>
    	<span class="ju_li_end_split">:</span>
    	<span class="ju_li_end_time">25</span>
    </div>
    <div class="shou_cang">
    	<span>收藏: 568</span>
    	<span class="browser">浏览: 568</span>
    	<span class="xiao_liang">月销量: 58</span>
    </div>
    <div class="can_shu">
		<ul data-role="listview">
			<li><a href="#">规格参数</a></li>
			<li><a href="#">颜色分类<span  style="color:gray;font-size:0.8rem;float:right;font-weight:normal;">37调轻巧,1件</span></a>
				
			</li>
			<li><a href="#">领取优惠券</a></li>
		</ul>
	</div>
    
    <div data-role="tabs" id="tabs">
	  	<div data-role="navbar">
		    <ul>
		      <li><a href="#goods_detail_id" data-ajax="false" style="color:#ff5543">宝贝详情</a>
		      	<label style="border-bottom:0.2rem solid #ff5543;margin-left:25%;width:50%;"></label>
		      </li>
		      <li><a href="#goods_evaluate_id" data-ajax="false">评价(1551)</a>
		      	<label style="border-bottom:0.2rem solid #ff5543;margin-left:25%;width:50%;display:none" ></label>
		      </li>
		    </ul>
	  	</div>
		  	<div id="goods_detail_id" class="ui-body-d ui-content">
			    <div><img src="../assets/100x100.png" width="100" height="100"></div>
		    	<div><img src="../assets/100x100.png" width="100" height="100"></div>
		    	<div><img src="../assets/100x100.png" width="100" height="100"></div>
			</div>
		  	<div id="goods_evaluate_id">
			    <div class="goods_evaluate_button">
			    	<button class="ui-btn ui-mini ui-btn-inline button_select">全部</button>
		    		<button class="ui-btn ui-mini ui-btn-inline button_unselect">有图</button>
			    	</div>
			    	
			    	<div class="evaluate">
			    		<div>
			    			<span>柯凡Areaa</span>
			    			<span class="evaluate_date">2017-05-01</span>
			    		</div>
			    		<div>第一次买光威,包装的很好,杆子总体质量也不错,性价比可以,东东不错</div>
			    		<div class="goods_type">颜色分类: 37 轻巧型</div>
			    	</div>
			    	<hr class="splitLine">
			    	<div class="evaluate">
			    		<div>
			    			<span>安静的心</span>
			    			<span class="evaluate_date">2017-05-01</span>
			    		</div>
			    		<div>外观漂亮,品牌的质量就是好!</div>
			    		<img src="../assets/100x100.png" width="100" height="100">
			    		<div class="goods_type">颜色分类: 37 轻巧型</div>
			    	</div>
			    	<hr class="splitLine">
			    	<div class="evaluate">
			    		<div>
			    			<span>小鱼儿</span>
			    			<span class="evaluate_date">2017-05-01</span>
			    		</div>
			    		<div>性价比很高 !</div>
			    		<div class="goods_type">颜色分类: 37 轻巧型</div>
			    	</div>
		  	</div>
		</div>
		<div class="box" id="box">
			<div class="box-inner" >
		   		<div>
		   			<span class="price">¥249</span>
		   			<span style="margin-left:35%;color:gray;">颜色分类</span>
		   			
		   			<a href="#" id="popup_color_fenlei" class="ui-btn ui-icon-delete ui-btn-icon-left" style="float:right;
		   			margin:0; border:none;background-color:#fff;padding-left:1.5rem;box-shadow:none"></a>
		   		</div>
		   		<div style="color:gray;margin:0.5rem 1rem;font-size:0.8rem;">库存 : 256</div>
		   		<div style="color:gray;margin:0.5rem 1rem;font-size:0.8rem;">规格 :</div>
		   		<div>
		   			<div style="margin-left:3rem">
			   			<button class="ui-btn ui-btn-inline guige_unselect">37调轻巧鲤鱼3.6m</button>
			   			<button class="ui-btn ui-btn-inline guige_unselect">37调轻巧鲤鱼3.6m</button>
			   		</div>
			   		<div style="margin-left:3rem">
			   			<button class="ui-btn ui-btn-inline guige_select">37调轻巧鲤鱼3.6m</button>
			   			<button class="ui-btn ui-btn-inline guige_unselect">37调轻巧鲤鱼3.6m</button>
			   		</div>
		   		</div>
		   		<ul class="btn-numbox" >
		            
		            <li>
		                <ul class="count">
		                    <li><span id="num-jia" class="num-jia">+</span></li>
		                    <li><input type="text" class="input-num" id="input-num" value="0" /></li>
		                     <li><span id="num-jian" class="num-jian">-</span></li>
		                </ul>
		            </li>
		            <li style="float:left;"><span class="number">数量</span></li>
			　　　  </ul>
		   		<div style="margin-top:1rem;">
		   			<span style="margin-left:1rem;color:gray;font-size:0.8rem;">共计</span>
		   			<span class="price">¥498</span>
		   		</div>
		   		<div id="confrim_button">确定</div>
		    </div> 
		</div> 
	    <div data-role="footer" data-position="fixed">
	        <div data-role="navbar" data-iconpos="bottom">
	            <ul>
	                <li><a href="#" data-icon="comment">咨询</a></li>
	                <li><a href="#" data-icon="star" class="ui-btn-active">收藏</a></li>
	                <li><a href="#" id="shoppingcart" data-icon="shop">我的鱼篓</a></li>
	                <li><a href="#leftpanel3" data-icon="notext">立即购买</a></li>
	            </ul>
	        </div><!-- /navbar -->
	    </div><!-- /footer -->

	</div>
	
	<div id="modal-backdrop"></div>
	<script>
		$('.banner').unslider({
			animation : 'fade',
			autoplay : true,
			arrows : false
		});
		
		$("#tabs ul>li>a").click(function(event){
			$( event.target ).css( {color:"#ff5543","background-color":"#f6f6f6",border:"none","text-shadow":"none","box-shadow":"none"} );
			$( event.target ).siblings().show();
			$( event.target ).parent().siblings().find("a").css({color:"black"});
			$( event.target ).parent().siblings().find("label").hide();
		});
		
	   $('#shoppingcart').click(function(){
           $('#box').animate({'bottom':'0'},300);
           $('#modal-backdrop').addClass("modal-backdrop");
        });
	  
	    $('#popup_color_fenlei').click(function(){
	        $('#box').animate({'bottom':'-100%'},300) ;
	        $('#modal-backdrop').removeClass("modal-backdrop");
	    });
	</script>
</body>
</html>